<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智慧学生卡</title>
    <link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<link href="/css/bootstrapValidator.css" type="text/css" rel="stylesheet">
	
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js" type="text/javascript"></script>
    <script src="/js/respond.min.js" type="text/javascript"></script>
    <![endif]-->
	
	<style>
	body{
		padding-top:50px;
		background-color:#F0F0F0;
	}
	.carousel{
        width:80%;
		height:230px;
		background-color:#F0F0F0;
		margin:0 auto;
	}
	.carousel .item{
		height:230px;
		background-color:#F0F0F0;
	}
	.carousel img{
		width:100%;
	}
	#allmap{
		margin: 0 auto;
		height: 600px;
		width: 100%;
	}
	#regionmap{
		margin: 0 auto;
		height:600px;
		width:100%;
	}
	</style>
</head>

<body>
<!-- 顶部导航 -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="color:#FFFFFF;">智慧学生卡</a>
        </div>
        <div class="navbar-collapse collapse" id="bs-example-collapse-1">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Service<span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="https://mp.weixin.qq.com/s/AQgrgvQM_htIbr9tXCtekA">产品介绍</a></li>
                        <li><a href="https://mp.weixin.qq.com/s/UyvAkp_1NTyeCdGIhp83Yw">使用手册</a></li>
                        <li><a href="https://mp.weixin.qq.com/s/mSduLFegVgM4wUczXZ7M9g">常见问题</a></li>
                        <li><a href="https://mp.weixin.qq.com/s/LwHuZR1JS7RhC-Y2FkLB6g">校园卡充值流程</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Function<span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#allmap">轨迹定位</a></li>
                        <li><a href="#regionmap">安全区域</a></li>
                    </ul>
                </li>

                <li><a href="/logout" onclick="logout()">退出登录</a></li>

            </ul>
        </div>
    </div>
</nav>

<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	<li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="/images/08.png" alt="...">
    </div>
    <div class="item">
      <img src="/images/09.png" alt="...">
    </div>
	<div class="item">
      <img src="/images/10.png" alt="...">
    </div>
	<div class="item">
      <img src="/images/11.png" alt="...">
    </div>
  </div>
  
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- 公告栏 -->
<div style="width:100%;height:35px;background-color:#F0F0F0;padding-top:15px;text-align:center">
	<marquee onmouseOver="this.stop()" onmouseOut="this.start()" scrollamount="10" width="50%" bgcolor="#F0F0F0">
		<h4 style="margin-top:0;margin-bottom:0;">智慧学生卡—行为管理智慧学生证</h4>
	</marquee>
</div>

<!-- 个人信息，今日运动，本周异常 -->
<div class="container-fluid">
	<div class="row">
	  <div class="col-md-4" style="text-align:center;">
		<img src="/images/05.png" alt="...">
		<br />
        <a tabindex="0" onclick="showInformationModal()" id="information" class="btn btn-lg btn-default btn-link" role="button" placement="right" title="个人信息">
              个人信息
        </a>
          <a href="/toModify" id="modifyinformation" type="button" class="btn btn-default btn-link" style="text-decoration:none;">修改</a>
	  </div>
	  <div class="col-md-4" style="text-align:center;">
		<img src="/images/06.png" alt="...">
		<br />
		<a tabindex="0" id="sports" class="btn btn-lg btn-default btn-link" role="button" data-toggle="popover" data-trigger="hover" placement="right" title="今日运动" data-content="" data-html="true">
			今日运动
		</a>
	  </div>
	  <div class="col-md-4" style="text-align:center;">
		<img src="/images/07.png" alt="...">
		<br />
		<a tabindex="0" id="abnormity" class="btn btn-lg btn-default btn-link" role="button" data-toggle="popover" data-trigger="hover" placement="right" title="本周异常" data-content="" data-html="true">
			本周异常
		</a>
	  </div>
	</div>
</div>

<br />
<!-- 轨迹定位 安全区域 -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div>
                <a style="font-family:黑体;font-size:18px;color:#3a5b7e;text-decoration:none;">轨迹定位</a>
                <div id="allmap"></div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div><br /><br /><br /><br /><br />
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div>
                <a style="font-family:黑体;font-size:18px;color:#3a5b7e;text-decoration:none;">安全区域</a>
                <div id="regionmap"></div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>

<!-- 个人信息模态框（Modal） -->
<div class="modal fade" id="informationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">个人信息</h4>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>属性</th><th>信息</th>
                        <th>属性</th><th>信息</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>用户名</td><td id="infmodal-username">...</td>
                        <td>姓名</td><td id="infmodal-fullname">...</td>
                    </tr>
                    <tr>
                        <td>手机号</td><td id="infmodal-phone">...</td>
                        <td>学生卡号</td><td id="infmodal-stucard">...</td>
                    </tr>
                    <tr>
                        <td>学生姓名</td><td id="infmodal-stuname">...</td>
                        <td>学生性别</td><td id="infmodal-stusex">...</td>
                    </tr>
                    <tr>
                        <td>学生所在学校</td><td id="infmodal-school">...</td>
                        <td>年级、班级</td><td id="infmodal-grade-class">...</td>
                    </tr>
                    <tr>
                        <td>学生生日</td><td id="infmodal-stubirthday">...</td>
                        <td>类型</td><td id="infmodal-stutype">...</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/bootstrapValidator.js" type="text/javascript"></script>
<!-- 百度地图API -->
<script src="http://api.map.baidu.com/api?v=2&ak=NiXjaf0nEpCuP51DbXlwjPGPMtoNmNDf" type="text/javascript"></script> 
<script type="text/javascript" language=JavaScript charset="UTF-8">

    //sportsinf();checksafeArea();trajectory();运动信息，安全区域，轨迹定位 刷新数据时间(4分钟)
    var n = 240000;

    //退出登录
    function logout() {
        sessionStorage.clear();     //清空数据
    }

    //个人信息
    var fullinformation;

    //得到数据
    if(sessionStorage['fullinf'] != null && typeof sessionStorage['fullinf'] != "undefined" && sessionStorage['fullinf'] != ""){
        //处理数据,将json字符串转成json对象
        fullinformation = JSON.parse(sessionStorage['fullinf']);
        //显示个人信息
        document.getElementById("infmodal-username").innerHTML=fullinformation.data.username;
        document.getElementById("infmodal-fullname").innerHTML=fullinformation.data.realname;
        document.getElementById("infmodal-phone").innerHTML=fullinformation.data.phone;
        document.getElementById("infmodal-stucard").innerHTML=fullinformation.data.student.imei;
        document.getElementById("infmodal-stuname").innerHTML=fullinformation.data.student.stuname;
        document.getElementById("infmodal-stusex").innerHTML=fullinformation.data.student.stusex;
        document.getElementById("infmodal-school").innerHTML=fullinformation.data.student.sch.schname;
        document.getElementById("infmodal-grade-class").innerHTML=fullinformation.data.student.stuclass;
        document.getElementById("infmodal-stubirthday").innerHTML=fullinformation.data.student.birthday;
        document.getElementById("infmodal-stutype").innerHTML=fullinformation.data.student.type;
    }

    //个人信息模态框
    function showInformationModal() {
        $('#informationModal').modal();
    }

	<!-- 今日运动，本周异常弹出框 -->
    var sports;
    var abnormity;
    sportsinf();
    window.setInterval(sportsinf,n);  //4分钟更新一次数据
    function sportsinf(){
        $.ajax({
            type:"get",
            url:"/card/"+fullinformation.data.student.imei,
            data:{},
            async:false,
            success:function (data) {
                var backMsg = JSON.parse(data);
                if(backMsg.code == 0){
                    sports = "步数:"+backMsg.data.stepNumber+"<br />"+"速度:"+backMsg.data.speed;
                    abnormity="...";
                    $("#sports").attr("data-content",sports);
                    $("#abnormity").attr("data-content",abnormity);
                    $("[data-toggle='popover']").popover();
                }else{
                    alert(backMsg.msg);
                }
            },
            error:function () {
                alert("提交请求失败");
            }
        });
    }

    //安全区域
    safeArea();
    var map1;
    var point1;
    function safeArea(){
        var schoollocation = fullinformation.data.student.sch.location.split(" ");
        var schoollongitude = schoollocation[0];
        var schoollatitude = schoollocation[1];
        map1 = new BMap.Map("regionmap");
        point1 = new BMap.Point(schoollongitude, schoollatitude);
        var marker1 = new BMap.Marker(new BMap.Point(schoollongitude, schoollatitude));
        map1.centerAndZoom(point1, 14);
        var circle1 = new BMap.Circle(point1,1000,{strokeColor:"red", strokeWeight:1, strokeOpacity:0.3});
        map1.enableScrollWheelZoom(true);
        map1.addOverlay(marker1);
        map1.addOverlay(circle1);
    }
    checksafeArea();
    window.setInterval(checksafeArea,n);     //4分钟更新一次数据，检查安全区域
    function checksafeArea(){
        $.ajax({
            type:"get",
            url:"/card/"+fullinformation.data.student.imei,
            data:{},
            async:false,
            success:function (data) {
                var backMsg = JSON.parse(data);
                if(backMsg.code == 0){
                    var loc = backMsg.data.location.split(" ");
                    var point2 = new BMap.Point(loc[0], loc[1]);
                    if(map1.getDistance(point1, point2) > 1000){
                        alert("未在安全区域");
                    }
                }else{
                    alert(backMsg.msg);
                }
            },
            error:function () {
                alert("提交请求失败");
            }
        });
    }

	<!-- 轨迹定位 -->
    var mapOptions={
        minZoom: 3,                 //最小级别
        maxZoom:19,                 //最大级别
        mapType:BMAP_NORMAL_MAP   //默认街道图
    }
    var map = new BMap.Map("allmap",mapOptions);        //创建Map实例 命名空间为BMAP
    trajectory();                                       //加载轨迹图
    window.setInterval(trajectory,n);                //4分钟更新一次轨迹
    function trajectory() {
        $.ajax({
            type:"get",
            url:"/card/location/"+fullinformation.data.student.imei,
            data:{},
            async:false,
            success:function (data) {
                var backMsg = JSON.parse(data);
                if(backMsg.code == 0){
                    var array1 = new Array();   //经度   开始-->结束
                    var array2 = new Array();   //纬度   开始-->结束
                    for(var m=0;m<backMsg.data.length;m++){
                        var str = backMsg.data[m].location;
                        var str1 = str.split(" ");
                        array1.push(str1[0]);
                        array2.push(str1[1])
                    }
                    var tracelist = new Array();     //为轨迹做准备，把所有的点扔里面，但不对每个点标注
                    for(var i=0;i<array1.length;i++){
                        var point = new BMap.Point(array1[i],array2[i]);
                        tracelist.push(point);
                    }
                    map.clearOverlays();   //清除地图上所有覆盖物
                    map.centerAndZoom(new BMap.Point(array1[0],array2[0]), 15);  // 初始化地图,设置中心点坐标和地图级别
                    //map.setCurrentCity("武汉");          // 设置地图显示的城市
                    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                    var polyline =new BMap.Polyline(tracelist, {
                        enableEditing: false,//是否启用线编辑，默认为false
                        enableClicking: true,//是否响应点击事件，默认为true
                        strokeWeight:'1',//折线的宽度，以像素为单位
                        strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                        strokeColor:"red" //折线颜色
                    });
                    map.addOverlay(polyline);          //增加折线
                    map.centerAndZoom(tracelist[array1.length-1], 15);
                    //首尾加上标注点
                    var marker = new BMap.Marker(tracelist[array1.length-1]); // 创建点
                    map.addOverlay(marker);                 // 加载标注
                    var infoWindow = new BMap.InfoWindow("开始位置!");
                    map.openInfoWindow(infoWindow,new BMap.Point(array1[0],array2[0]));
                    var marker = new BMap.Marker(tracelist[0]); // 创建点
                    map.addOverlay(marker);                 // 加载标注
                }else{
                    alert(backMsg.msg);
                }
            },
            error:function () {
                alert("提交请求失败");
            }
        });
    }
	
</script>
</body>
</html>
